<template>
	<view class="login login-bg w-h-100" :class="darkMode?'custom-dark':'custom-light'">
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="logoImage"></image>
			</view>
			<!-- 主体表单 -->
			<view class="main">
				<wInput v-model="phoneData" type="text" maxlength="11" placeholder="用户名/电话"></wInput>
				<wInput v-model="passData" type="password" maxlength="12" placeholder="密码" isShowPass></wInput>
			</view>
			<wButton text="登 录" :rotate="isRotate" @click.native="startLogin()"></wButton>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import wInput from '@/components/watch-login/watch-input.vue'
	import wButton from '@/components/watch-login/watch-button.vue'
	import md5 from '@/common/lib/md5.min.js'

	export default {
		computed: {
			...mapGetters(['darkMode'])
		},
		data() {
			return {
				// logo图片
				logoImage: '/static/img/logo.png',
				phoneData: '', //用户/电话
				passData: '', //密码
				isRotate: false, //是否加载旋转
				
			};
		},
		components: {
			wInput,
			wButton,
		},
		onLoad(options) {
			if (options.errorMsg) {
				uni.showToast({
					title: options.errorMsg,
					icon: 'none'
				})
			}
		},
		methods: {
			login(params) {
				console.log('login vue, login func',params);
				if (params) {
					this.isRotate = true
					console.log('login vue, isRotate is true',params);
					uni.request({
						url:'https://auth.aixifs.com/api/user/login',
						method:'POST',
						data:{
							'account':params.account,
							'username':params.account,
							'phone':params.account,
							'password':params.password						
						},
						xhrFields: {
						                        withCredentials: true
						                    },
						authType: 'None',
						header:{
							'Content-Type': 'application/json'
						},
						success:(res)=> {
							console.log(res.data);
							console.log(res.statusCode);
							if(res.statusCode===200){
								let StorageInfo = uni.getStorageInfoSync()
								console.log('success StorageInfo',StorageInfo);
								const token = {
									"role":res.role,
									"username":params.username,
									"loginTime":Date.now()
								}
								uni.setStorageSync('token',token)
								
								let save_token = uni.getStorageSync('token')
								console.log('success token ',save_token);
								
								uni.reLaunch({
									url:"/pages/index/index"
								})
							}else{
								console.log('login faile',res.statusCode);
								// uni.navigateTo({
								// 	url:"/pages/chat/chat"
								// })
							}
							
						}
					});
					
					// this.$store.dispatch('login', params).then(res => {
					// 	console.log('login res',res);
					// 	this.isRotate = false
					// 	uni.reLaunch({
					// 		url: '/pages/index/index',
					// 	})
					// }).catch((error) => {
					// 	this.isRotate = false;
					// 	console.error('Login failed:', error); // 打印错误信息
					// 	/* this.isRotate = true;
					// 	uni.reLaunch({
					// 		url: '/pages/index/index',
					// 	}) */
					// })
				}
			},
			startLogin() {
				//登录
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.phoneData.length == "") {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '用户名不能为空'
					});
					return;
				}
				if (this.passData.length < 5) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '密码不正确'
					});
					return;
				}

				// 网络请求
				const params = {
					//name: this.phoneData,
					account: this.phoneData,
					phone: this.phoneData,
					//passwd: md5(this.passData)
					passwd: this.passData,
					password: this.passData
				}
				console.log('login before params',params);
				this.login(params)
			}
		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");

	.login-bg {
		/* width: 100%;
		height: 100%;
		background-image: url('/static/img/login-bg.png');
		background-size: cover;
		background-position: 50%;
		position: absolute; */
	}

	.login-bg .content .header uni-image {
		width: 241rpx;
		height: 241rpx;
	}

	/* .login-bg .content .header {
		width: 241rpx;
		height: 241rpx;
		background-size: 241rpx;
		background-image: url('/static/img/logo.png');
	} */
</style>
